<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta
      name="description"
      content="Load glTF models using Model Experimental."
    />
    <meta name="cesium-sandcastle-labels" content="3D Tiles Next" />
    <title>Cesium Demo</title>
    <script type="text/javascript" src="../Sandcastle-header.js"></script>
    <script
      type="text/javascript"
      src="../../../Build/CesiumUnminified/Cesium.js"
      nomodule
    ></script>
    <script type="module" src="../load-cesium-es6.js"></script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
    <style>
      @import url(../templates/bucket.css);
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar"></div>
    <script id="cesium_sandcastle_script">
      function startup(Cesium) {
        "use strict";
        //Sandcastle_Begin

        const viewer = new Cesium.Viewer("cesiumContainer");

        viewer.clock.currentTime = Cesium.JulianDate.fromIso8601(
          "2021-11-09T20:27:37.016064475348684937Z"
        );

        // Models
        const models = [
          {
            text: "Cesium Balloon",
            onselect: function () {
              selectModel(
                "../../SampleData/models/CesiumBalloon/CesiumBalloon.glb",
                15
              );
            },
          },
          {
            text: "Skinned Character",
            onselect: function () {
              selectModel(
                "../../SampleData/models/CesiumMan/Cesium_Man.glb",
                0
              );
            },
          },
          {
            text: "Draco Compressed Model",
            onselect: function () {
              selectModel(
                "../../SampleData/models/DracoCompressed/CesiumMilkTruck.gltf",
                0
              );
            },
          },
          {
            text: "Unlit Box",
            onselect: function () {
              selectModel("../../SampleData/models/BoxUnlit/BoxUnlit.gltf", 0);
            },
          },
          {
            text: "Drone",
            onselect: function () {
              selectModel(
                "../../SampleData/models/CesiumDrone/CesiumDrone.glb",
                15
              );
            },
          },
          {
            text: "Ground Vehicle",
            onselect: function () {
              selectModel(
                "../../SampleData/models/GroundVehicle/GroundVehicle.glb",
                0
              );
            },
          },
          {
            text: "Instanced Box",
            onselect: function () {
              selectModel(
                "../../SampleData/models/BoxInstanced/BoxInstanced.gltf",
                15
              );
            },
          },
        ];

        const hpr = new Cesium.HeadingPitchRoll(
          Cesium.Math.toRadians(180),
          0,
          0
        );
        const fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator(
          "north",
          "west"
        );

        function selectModel(url, height) {
          const position = Cesium.Cartesian3.fromDegrees(
            -123.0744619,
            44.0503706,
            height
          );

          viewer.scene.primitives.removeAll();
          const model = viewer.scene.primitives.add(
            Cesium.ModelExperimental.fromGltf({
              gltf: url,
              modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(
                position,
                hpr,
                Cesium.Ellipsoid.WGS84,
                fixedFrameTransform
              ),
              minimumPixelSize: 128,
              maximumScale: 20000,
            })
          );

          model.readyPromise.then(function (model) {
            viewer.camera.lookAt(
              position,
              new Cesium.HeadingPitchRange(
                Cesium.Math.toRadians(45),
                Cesium.Math.toRadians(-15),
                model.boundingSphere.radius * 5
              )
            );
          });
        }

        Sandcastle.addToolbarMenu(models);

        //Sandcastle_End
        Sandcastle.finishedLoading();
      }
      if (typeof Cesium !== "undefined") {
        window.startupCalled = true;
        startup(Cesium);
      }
    </script>
  </body>
</html>
